import React, {useState,useEffect} from 'react'
import Taro from '@tarojs/taro'
import {AtDivider, AtIcon, AtTabBar, AtFloatLayout } from 'taro-ui'
import {View,Text,Swiper,SwiperItem,Image} from '@tarojs/components'
import {get,post} from '../../utils/http'
import './index.scss'
function Commdetail (){
  const [commSwiper,useCommSwiper] = useState([
    {url: require('../../static/images/banner.png'),id:1},
    {url: require('../../static/images/banner2.png'),id:2},
    {url: require('../../static/images/banner.png'),id:3},
    {url: require('../../static/images/banner2.png'),id:4},
    {url: require('../../static/images/banner.png'),id:5},
    {url: require('../../static/images/banner.png'),id:6},
  ])
  // 商品数量、是否展示商品选择框、购买/添加购物车状态、
  const [commInfo,useCommInfo] = useState({
    commDetailsL: {},
    commNum: 1, // 商品数量
    isOpened: false, // 是否打开选择框
    commState: null // 状态 2是添加购物车 1是直接购买
  })
  // 声明周期 网络请求
  useEffect(() => {
    console.log(commInfo)
  },[])
  // 选择商品
  function seleComm(index){
    useCommInfo({
      ...commInfo,
      isOpened: true,
      commState: index,
      commNum: 1
    })
  }
  // 改变数量
  function changeCommNum(type){
    // type == 1 新增 type == 0 减少
    if(type){
      useCommInfo({...commInfo, commNum: commInfo.commNum+1})
    }else{
      if(commInfo.commNum === 1){
        useCommInfo({...commInfo, commNum: commInfo.commNum = 1})

      }else{
        useCommInfo({...commInfo, commNum: commInfo.commNum - 1})
      }
    }
  }
  // 确认添加
  function commBtn(){
    console.log(commInfo)
    // 添加购物车
    if(commInfo.commState === 2){
      useCommInfo({
        ...commInfo,
        isOpened: false,
      })
    }else{
      // 购买
      Taro.navigateTo({
        url: '/pages/order/index'
      })
    }
  }
  return (
    <View className='comm_detail'>
      {/*轮播*/}
      <Swiper
      className='comm_swiper'
      indicatorColor='#999'
      indicatorDots
      autoplay={3000}
      circular
      indicatorActiveColor='#333'
      >
        {
          commSwiper.map((item) => {
            return (
              <SwiperItem>
                <Image src={item.url} />
              </SwiperItem>
            )
          })
        }
      </Swiper>
    {/*商品详情*/}
      <View className='comm_details'>
        <Text className='comm_newprice'>￥666</Text>
        <Text className='comm_oldprice'>￥888</Text>

        {/*标签展示*/}
        <View className='comm_tag'>
          <Text>折扣</Text>
          <Text>5.8折</Text>
        </View>
        {/*标题描述*/}
        <View className='comm_de_con'>
          <Text className='comm_de_tit'>西瓜 300/个</Text>
          <Text className='comm_de_ms'>香甜可口，色泽伊人</Text>
        </View>
      </View>
      <View style={{margin: '10px'}}>
        <AtDivider content='详情' fontColor='#999' lineColor='#999' />
        {/*详情*/}
        <View className='comm_content'>
          暂无
        </View>
      </View>
      {/*添加购物车*/}
      <View className='add_cart'>

        <View className="add_home" onClick={() => { Taro.switchTab({url:'/pages/shopping/index'})}}>
          <Image className="cart_img" src={require('../../static/images/cart.png')} />
          <Text>购物车</Text>
          <Text className="comm_num">10</Text>
        </View>

        <View className="buy_now" onClick={() => {seleComm(1)}}>
          <Text>立即购买</Text>
        </View>
        <View className="add_carts" onClick={() => {seleComm(2)}}>
          <Text>加入购物车</Text>
        </View>
      </View>

      {/*弹框*/}
      <AtFloatLayout className='at_float_layout' isOpened={commInfo.isOpened} onClose={() => {useCommInfo({...commInfo,isOpened: false})}}>
        <View className='comm_deta'>
          <Image className="comm_deta_img" src={require('../../static/images/cart.png')} />
          <View className='comm_deta_fr'>
            <Text >￥3元</Text>
            <Text>已选：1件/份</Text>
          </View>
        </View>
        <View className='comm_speci'>
            <View className='spe_tit'>规格</View>
            <View className='spe_items'>
              <Text>1件/份</Text>
            </View>

        </View>
        <View className='comm_num'>
          <Text>购买数量</Text>
          <View>
            <Text style={{fontSize: 30 + 'px'}} onClick={() => changeCommNum(0)}>-</Text>
            <Text>{commInfo.commNum}</Text>
            <Text style={{fontSize: 26 + 'px'}} onClick={() => changeCommNum(1)}>+</Text>
          </View>
        </View>
        <View className='comm_btn'  onClick={() => commBtn()}>
            <Text>确定</Text>
        </View>
      </AtFloatLayout>
    </View>
  )
}

export default Commdetail
